<template>
  <div class="dashboard-container">
    <!-- 顶部公司信息栏 -->
    <div class="header">
      <div class="company-info">
        <div class="company-logo">
          <el-icon :size="36" color="white">
            <Watermelon />
          </el-icon>
        </div>
        <div>
          <div class="company-name">西安宝科流体科技有限公司</div>
          <div class="company-slogan">创新流体技术 · 驱动工业未来</div>
        </div>
      </div>
      <div class="user-area">
        <div class="notification-icon">
          <el-badge :value="3" class="item">
            <el-icon :size="20">
              <Bell />
            </el-icon>
          </el-badge>
        </div>

      </div>
    </div>

    <!-- 顶部统计卡片 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :sm="12" :md="6" v-for="item in statsData" :key="item.title">
        <el-card shadow="hover" class="stat-card">
          <div class="flex items-center">
            <el-icon :size="40" :color="item.color" class="mr-10">
              <component :is="item.icon" />
            </el-icon>
            <div>
              <div class="text-gray-500 text-sm">{{ item.title }}</div>
              <div class="text-2xl font-bold">{{ item.value }}</div>
              <div class="text-xs mt-2" :style="{ color: item.color }">
                <el-icon :size="12">
                  <Top />
                </el-icon>
                {{ item.rate }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :md="24">

        <!-- 新增公告区域 -->
        <el-card class="announcement-card mb-20">
          <template #header>
            <div class="announcement-header">
              <div class="announcement-title">
                <el-icon class="mr-8">
                  <BellFilled />
                </el-icon>
                <span>公司公告</span>
              </div>
              <el-button type="primary" link>查看更多</el-button>
            </div>
          </template>
          <div class="announcement-list">
            <div v-for="(item, index) in announcements" :key="index"
              :class="['announcement-item', { 'new-announcement': item.isNew }]">
              <div class="announcement-item-title">
                <el-icon class="mr-8" :color="item.iconColor">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.title }}</span>
                <el-tag v-if="item.isNew" size="small" type="danger" class="ml-10">新</el-tag>
              </div>
              <div class="announcement-item-content">
                {{ item.content }}
              </div>
              <div class="announcement-meta">
                <span>{{ item.department }}</span>
                <span>{{ item.date }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :xs="24" :md="12">
        <el-card shadow="hover">
    <DeviceMap />
        </el-card>
      </el-col> -->

    </el-row>
    <!-- 主要图表区域 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :xs="24" :md="16">
        <el-card shadow="hover">
          <div ref="lineChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :md="8">
        <el-card shadow="hover">
          <div ref="pieChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态表格 -->
    <el-card shadow="hover">
      <template #header>
        <div class="flex justify-between items-center">
          <span>最新订单</span>
          <el-button type="primary" link>查看更多</el-button>
        </div>
      </template>
      <el-table :data="orderData" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="180" />
        <el-table-column prop="customer" label="客户" />
        <el-table-column prop="product" label="产品" />
        <el-table-column prop="amount" label="金额" align="right">
          <template #default="{ row }">¥{{ row.amount.toLocaleString() }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{ row }">
            <el-tag :type="statusTagType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180" />
      </el-table>
    </el-card>

    <div class="footer">
      <p>© 2023 宝科流体科技有限公司 数字化平台 | 版本号：V2.5.1</p>
      <p>技术支持：tech@baokefluid.com | 服务热线：400-888-8888</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import DeviceMap from '@/views/map/DeviceMap.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'
import {
  User,
  ShoppingCart,
  Money,
  List,
  Top,
  Bell,
  BellFilled,
  StarFilled,
  WarningFilled,
  Check,
  Calendar,
  Watermelon
} from '@element-plus/icons-vue'

// 统计卡片数据
const statsData = ref([
  { title: '总产量', value: '12,345 件', rate: 12.5, icon: User, color: '#409EFF' },
  { title: '订单总量', value: '2,345', rate: 8.2, icon: ShoppingCart, color: '#67C23A' },
  { title: '销售额', value: '¥345,678', rate: 18.4, icon: Money, color: '#E6A23C' },
  { title: '设备数量', value: '456 台', rate: 5.6, icon: List, color: '#F56C6C' }
])

// 公告数据
const announcements = ref([
  {
    title: '关于2023年第三季度生产目标的通知',
    content: '根据公司年度计划，第三季度生产目标已确定。各部门需在8月10日前提交详细实施方案...',
    department: '行政部',
    date: '2023-07-28',
    icon: StarFilled,
    iconColor: '#E6A23C',
    isNew: true
  },
  {
    title: '生产车间安全大检查通知',
    content: '为确保夏季高温期间生产安全，公司将于8月1日-5日组织全厂区安全大检查...',
    department: '安全部',
    date: '2023-07-25',
    icon: WarningFilled,
    iconColor: '#F56C6C',
    isNew: false
  },
  {
    title: '技术研发部项目验收结果通报',
    content: '"高效节能流体控制系统"项目已通过专家组验收，特此通报表扬研发团队...',
    department: '技术部',
    date: '2023-07-20',
    icon: Check,
    iconColor: '#67C23A',
    isNew: false
  },
  {
    title: '2023年度员工培训计划安排',
    content: '本年度员工技能培训计划已制定完成，涵盖生产技术、安全管理、质量管理等方面...',
    department: '人力资源部',
    date: '2023-07-15',
    icon: Calendar,
    iconColor: '#409EFF',
    isNew: false
  }
])

// 订单数据
const orderData = ref([
  { id: '20230728001', customer: '北方工业集团', product: '高压流体阀门', amount: 128000, status: '已完成', date: '2023-07-28' },
  { id: '20230728002', customer: '华东能源公司', product: '智能流量计', amount: 256000, status: '生产中', date: '2023-07-28' },
  { id: '20230728003', customer: '南海石油', product: '深海管道系统', amount: 3580000, status: '已付款', date: '2023-07-28' },
  { id: '20230728004', customer: '西电集团', product: '冷却系统组件', amount: 876500, status: '待发货', date: '2023-07-27' },
  { id: '20230728005', customer: '长城汽车', product: '汽车流体控制系统', amount: 543200, status: '设计中', date: '2023-07-27' }
])

// 图表相关
const lineChartRef = ref<HTMLElement>()
const pieChartRef = ref<HTMLElement>()
let lineChart: echarts.ECharts | null = null
let pieChart: echarts.ECharts | null = null

// 初始化折线图
const initLineChart = () => {
  if (!lineChartRef.value) return

  lineChart = echarts.init(lineChartRef.value)
  lineChart.setOption({
    title: {
      text: '月度生产趋势',
      left: 'center',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['产量', '良品率'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      {
        type: 'value',
        name: '产量(件)',
        position: 'left'
      },
      {
        type: 'value',
        name: '良品率(%)',
        min: 90,
        max: 100,
        position: 'right',
        axisLine: {
          show: true
        },
        axisLabel: {
          formatter: '{value}%'
        }
      }
    ],
    series: [
      {
        name: '产量',
        type: 'line',
        smooth: true,
        data: [8200, 9320, 9010, 9340, 12900, 13300, 14200],
        lineStyle: {
          width: 3,
          color: '#5470C6'
        },
        itemStyle: {
          color: '#5470C6'
        }
      },
      {
        name: '良品率',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        data: [92.5, 93.8, 95.2, 94.5, 96.2, 97.1, 97.8],
        lineStyle: {
          width: 3,
          color: '#91CC75'
        },
        itemStyle: {
          color: '#91CC75'
        }
      }
    ]
  })
}

// 初始化饼图
const initPieChart = () => {
  if (!pieChartRef.value) return

  pieChart = echarts.init(pieChartRef.value)
  pieChart.setOption({
    title: {
      text: '产品类别占比',
      left: 'center',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [{
      name: '产品类别',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['40%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '16',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '阀门系列' },
        { value: 735, name: '管道系统' },
        { value: 580, name: '流量计' },
        { value: 484, name: '控制系统' },
        { value: 300, name: '其他配件' }
      ]
    }]
  })
}

// 状态标签类型映射
const statusTagType = (status: string) => {
  const map: Record<string, string> = {
    '已完成': 'success',
    '生产中': '',
    '已付款': 'primary',
    '待发货': 'warning',
    '设计中': 'info'
  }
  return map[status] || 'info'
}

// 处理窗口大小变化
const handleResize = () => {
  lineChart?.resize()
  pieChart?.resize()
}

onMounted(() => {
  initLineChart()
  initPieChart()
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  lineChart?.dispose()
  pieChart?.dispose()
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 20px;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 20px;
  }

  .company-info {
    display: flex;
    align-items: center;
  }

  .company-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #1e5799, #207cca);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }

  .company-name {
    font-size: 24px;
    font-weight: bold;
    color: #1e5799;
  }

  .company-slogan {
    color: #606266;
    font-size: 14px;
    margin-top: 4px;
  }

  .user-area {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .notification-icon {
    cursor: pointer;
  }

  .user-card {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background: #f5f7fa;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #e4e7ed;
    }
  }

  .user-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #409EFF, #64b5ff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    color: white;
  }

  .user-name {
    font-weight: 500;
    color: #303133;
  }

  .mb-20 {
    margin-bottom: 20px;
  }

  .stat-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }

    :deep(.el-card__body) {
      padding: 20px !important;
    }
  }

  .flex {
    display: flex;
  }

  .items-center {
    align-items: center;
  }

  .text-gray-500 {
    color: #909399;
  }

  .text-sm {
    font-size: 14px;
  }

  .text-2xl {
    font-size: 24px;
  }

  .font-bold {
    font-weight: bold;
  }

  .text-xs {
    font-size: 12px;
  }

  .mt-2 {
    margin-top: 8px;
  }

  .mr-10 {
    margin-right: 10px;
  }

  .ml-10 {
    margin-left: 10px;
  }

  .mr-8 {
    margin-right: 8px;
  }

  .announcement-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #1e5799;

    :deep(.el-card__header) {
      padding: 16px 20px;
      background-color: #f8fafc;
      border-bottom: 1px solid #e4e7ed;
    }
  }

  .announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .announcement-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #1e5799;
    font-size: 16px;
  }

  .announcement-list {
    max-height: 300px;
    overflow-y: auto;
  }

  .announcement-item {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
    transition: background-color 0.3s;
    cursor: pointer;

    &:hover {
      background-color: #f8fafc;
    }

    &:last-child {
      border-bottom: none;
    }
  }

  .announcement-item-title {
    font-weight: 500;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }

  .announcement-item-content {
    color: #606266;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.6;
  }

  .announcement-meta {
    display: flex;
    justify-content: space-between;
    color: #909399;
    font-size: 12px;
  }

  .new-announcement {
    background-color: #f0f7ff;
    border-left: 4px solid #409EFF;
    margin-left: -20px;
    padding-left: 24px;
    border-radius: 0 8px 8px 0;
  }

  .chart-container {
    height: 400px;
    width: 100%;
  }

  .footer {
    text-align: center;
    padding: 20px;
    color: #909399;
    font-size: 13px;
    border-top: 1px solid #e4e7ed;
    margin-top: 30px;

    p {
      line-height: 1.6;
    }
  }

  .justify-between {
    justify-content: space-between;
  }

  @media (max-width: 768px) {
    .header {
      flex-direction: column;
      align-items: flex-start;
    }

    .user-area {
      margin-top: 15px;
      width: 100%;
      justify-content: space-between;
    }

    .company-name {
      font-size: 20px;
    }

    .announcement-list {
      max-height: 200px;
    }
  }
}
</style>